<!-- 登录页 -->
<template>
    <div class="login">
        <div class="login_top">
            <div class="logo"></div>
            <h3 class="top_text">欢迎登录</h3>
            <router-link to="/" tag="div" class="top_index">
                进入网站首页
                <i class="el-icon-arrow-right"></i>
                <i class="el-icon-arrow-right"></i>
            </router-link>
        </div>
        <div class="login_com">
            <div class="log_com_from">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="账户登录" name="first">
                        <div class="log_fir_com">
                            <div class="fir_box fir_box1" v-show="isBox">
                                <div class="fir_box_tit">
                                    <a @click="resetForm('ruleForm')"><i class="el-icon-message"></i>使用账号登录</a>
                                </div>

                                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                                    <el-form-item prop="name">
                                        <el-input placeholder="请输入用户名" v-model="ruleForm.name">
                                            <template slot="prepend"><i class="el-icon-user"></i></template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="password">
                                        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password">
                                            <template slot="prepend"><i class="el-icon-lock"></i></template>
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="fir_box fir_box2" v-show="!isBox">
                                <div class="fir_box_tit">
                                    <a @click="resetForm('ruleForm1')"><i class="el-icon-user"></i>使用短信登录</a>
                                </div>

                                <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1">
                                    <el-form-item prop="phone">
                                        <el-input placeholder="请输入手机号" autocomplete="off"
                                            v-model.number="ruleForm1.phone">
                                            <template slot="prepend"><i class="el-icon-user"></i></template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input placeholder="请输入验证码" v-model="ruleForm1.code" class="code_box">
                                            <template slot="prepend"><i class="iconfont">&#xe62b;</i></template>
                                            <el-button slot="append" @click="openCode('ruleForm')">发送验证码</el-button>
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="fir_bom_fot">
                                <div class="fir_fot_box">
                                    <el-checkbox v-model="checked"></el-checkbox>
                                    <p>我已同意<span>《隐私条款》</span>和<span>《服务条款》</span></p>
                                    <div class="error" v-show="!checked">
                                        <i class="el-icon-warning"></i>
                                        请勾选登录协议
                                    </div>
                                </div>
                                <el-button class="fir_fot_btn" @click="submitForm('ruleForm')">登录</el-button>
                                <div class="fir_fot">
                                    <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                                        alt="">
                                    <div class="fir_fot_com">
                                        <span>忘记密码</span>
                                        <span>免费注册</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="扫码登录" name="second">
                        <div class="log_sec">
                            <img src="	http://erabbit.itheima.net/img/qrcode.5372a064.jpg" alt="" class="log_er">
                            <p class="log_er_text">打开<span>小兔鲜App</span>扫码登录</p>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="login_footer">
            <ul class="log_list">
                <li>关于我们</li>
                <li>帮助中心</li>
                <li>售后服务</li>
                <li>配送与验收</li>
                <li>商务合作</li>
                <li>搜索推荐</li>
                <li>友情链接</li>
            </ul>
            <p class="log_fot_text">CopyRight &copy; 小兔鲜儿</p>
        </div>
    </div>
</template>

<script>
export default {
    name: "LoginView",
    data() {
        return {
            activeName: 'first',
            checked: true,
            isBox: true,
            // 账号
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ], password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],
            },
            ruleForm: {
                name: 'xiaotuxian001',
                password: "123456"
            },
            // 手机
            rules1: {
                phone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                    { type: 'number', message: '手机必须为数字值', trigger: 'blur' },
                    { required: true, pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ]

            },
            ruleForm1: {
                phone: '',
                code: ""
            },
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        submitForm(formName) {
            if (this.isBox) { formName = 'ruleForm' } else { formName = 'ruleForm1' }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: "POST",
                        url: "/login",
                        data: {
                            account: this.ruleForm.name,
                            password: this.ruleForm.password
                            
                        }
                    }).then(res => {
                        if (res.status == 200) {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'success'
                            });
                            localStorage.setItem("name",res.data.result.account)
                            localStorage.setItem("erabbit-client-pc-124-store", JSON.stringify({ cart: {}, user: { profile: res.data.result, redirectUrl: "/" } }))
                            this.$router.push(`/`)
                        }
                        console.log(res);
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.isBox = !this.isBox
            if (this.isBox) {
                this.ruleForm.name = ''
                this.ruleForm.password = ''
            } else {
                this.ruleForm.phone = ''
                this.ruleForm.code = ''
            }
            this.$refs[formName].resetFields();
        },
        // 发送验证码
        openCode() {
            this.$refs[ruleForm1].validate((valid) => {
                if (valid) {
                    this.$message.error('用户不存在');
                } else {
                    return false;
                }
            });
        }
    },
    created(){
        localStorage.setItem("erabbit-client-pc-124-store", JSON.stringify({ cart: {}, user: { profile: '', redirectUrl: "/" } }))
    }
}
</script>
<style scoped lang="less">
.login {

    // 头部
    .login_top {
        width: 1240px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 0 auto;

        .logo {
            width: 200px;
            height: 132px;
            background: url("http://erabbit.itheima.net/img/logo.0940ebb5.png") no-repeat center;
            background-size: contain;
        }

        .top_text {
            flex: 1;
            margin: 0 0 38px 25px;
            color: #666;
            font-size: 24px;
            font-weight: 400;
        }

        .top_index {
            width: 120px;
            font-size: 16px;
            margin-bottom: 38px;
            cursor: pointer;

            i {
                letter-spacing: -5px;
                color: #27ba9b;
                font-size: 14px;
            }
        }
    }

    // 主题内容
    .login_com {
        height: 488px;
        background: url("http://erabbit.itheima.net/img/login-bg.696efec3.png") no-repeat;
        background-size: cover;
        position: relative;

        .log_com_from {
            width: 300px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 54px;
            transform: translateX(100px);
            background: #fff;
            box-shadow: 0 0 10px rgb(0 0 0 / 15%);
            padding: 0 40px;
        }
    }

    // 页脚
    .login_footer {
        width: 1240px;
        margin: 0 auto;
        padding: 30px 0 50px;
        text-align: center;

        .log_list {
            display: flex;
            justify-content: center;
            padding-top: 20px;
            color: #999;

            li {
                padding: 0 10px;
                border-left: 1px solid #ccc;
                cursor: pointer;

                &:first-child {
                    border: none;
                }
            }
        }

        .log_fot_text {
            padding-top: 20px;
            color: #999;
        }
    }
}
</style>

<style lang="less">
// 去除边框
.login .el-tabs--card>.el-tabs__header {
    border: none !important;
}

.login .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
}

.login .el-tabs__item {
    border: none !important;
}

// 导航栏
.login .el-tabs__nav {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .el-tabs__item {
        font-size: 18px;
        height: 55px;
        line-height: 55px;
        padding: 0 !important;

        &:hover {
            color: #000;
            font-weight: 0;
        }
    }

    .el-tabs__item.is-active {
        color: #27ba9b;
        font-weight: 700;
    }
}

.login .el-tabs--card>.el-tabs__header .el-tabs__item {
    transition: 0s;
}

// 扫码登录
.login .log_sec {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .log_er {
        width: 205px;
        height: 205px;
        margin: 0 auto;
    }

    .log_er_text {
        margin-top: 20px;
        text-align: center;

        span {
            cursor: pointer;
            color: #27ba9b;
            font-size: 16px;
        }
    }
}

// 账号登录
.login .log_fir_com {
    .fir_bom_fot {
        .fir_fot_box {
            margin-bottom: 28px;
            display: flex;
            position: relative;

            p {
                font-size: 14px;
                margin-left: 3px;

                span {
                    color: #069;
                    cursor: pointer;
                }
            }

            .error {
                color: #cf4444;
                font-size: 12px;
                position: absolute;
                bottom: -20px;
                left: 0;
            }
        }

        .fir_fot_btn {
            width: 100%;
            height: 40px;
            color: #fff;
            background: #27ba9b;
            font-size: 14px;
        }

        .fir_fot {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .fir_fot_com {
                padding: 20px 0;
                display: flex;
                color: #999;
                font-size: 14px;

                span {
                    margin-left: 10px;
                    cursor: pointer;
                }
            }
        }
    }

    .fir_box {
        .fir_box_tit {
            display: block;
            font-size: 14px;
            padding: 15px 0;
            color: #27ba9b;
            text-align: right;

            a {
                cursor: pointer;
            }
        }
    }
}

.login .el-checkbox__input.is-checked .el-checkbox__inner,
.login .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #27ba9b;
    color: #27ba9b;
}

.login .el-input-group__prepend {
    padding: 0 12px;
    color: #fff;
    background: #cfcdcd;
}

.login .el-input-group__append {
    background: #f5f5f5;
    color: #000;
}
</style>